<script type="text/javascript">
        function updateSearchInfo() {
            document.getElementById("searchInfoBox").innerHTML = "Searching please wait ...";
        }       

<!-- Code based on example script at http://sivamdesign.com/scripts/ -->
<!--
var y1 = 100;   // change the # on the left to adjuct the Y co-ordinate
(document.getElementById) ? dom = true : dom = false;

function hideSearchInfoBox() {
   /*
  if (dom) {
      document.getElementById("searchInfoBox").style.visibility='hidden';
  }
    */
}

function showSearchInfoBox() {
  if (dom) {
      document.getElementById("searchInfoBox").style.visibility='visible';
  }
}

function placeSearchInfoBox() {
  if (dom && !document.all) {
      document.getElementById("searchInfoBox").style.top = window.pageYOffset + (window.innerHeight - (window.innerHeight-y1)) + "px";
  }
  if (document.all) {
      document.all["searchInfoBox"].style.top = document.documentElement.scrollTop + (document.documentElement.clientHeight - (document.documentElement.clientHeight-y1)) + "px";
  }
  window.setTimeout("placeSearchInfoBox()", 10);
}
// -->

    </script>
    <script type="text/javascript">
        //checks if an array contains a value given
        function isValueInThisArray(arr, val) {
            for (var v = 0; v < arr.length; v++) {
                if (val == arr[v]) {
                    return true;
                } 
            }
            return false;
        }


        function getExtraEntityData(eid) {

            
            var txt = '${entityAdditionalDataXML}';
            //txt = txt.replace("&", "and", "gi");

            if (window.DOMParser)
        {
            var parser=new DOMParser();
            var xmlDoc=parser.parseFromString(txt,"text/xml");
        }
        else // Internet Explorer
        {
            xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
            xmlDoc.async="false";
            xmlDoc.loadXML(txt);
        }
        var entityTags = xmlDoc.getElementsByTagName("entity");
        for (var j=0;j<entityTags.length;j++)
        {

            if(entityTags[j].getElementsByTagName("id")[0].childNodes[0].nodeValue == eid) {
                var keywordTags = entityTags[j].getElementsByTagName("keyword");
                var keywordsforlink = "";
                var keywordsDivUpdate = "";

                //update Name in details box
                document.getElementById("name").innerHTML = entityTags[j].getElementsByTagName("name")[0].childNodes[0].nodeValue;
                var uniqueKeywordsList=new Array(); //holds unique values only

                for (var i=0;i<keywordTags.length;i++)
                {
                    //only add a new keyword to the string
                    if(!isValueInThisArray(uniqueKeywordsList, keywordTags[i].getElementsByTagName("keywordname")[0].childNodes[0].nodeValue.toLowerCase())) {                        
                        keywordsforlink += keywordTags[i].getElementsByTagName("keywordname")[0].childNodes[0].nodeValue + ",";                        
                        uniqueKeywordsList[uniqueKeywordsList.length]=keywordTags[i].getElementsByTagName("keywordname")[0].childNodes[0].nodeValue.toLowerCase();                        
                    }
                    
                    keywordsDivUpdate += "[*** ";                    
                    keywordsDivUpdate += keywordTags[i].getElementsByTagName("keywordname")[0].childNodes[0].nodeValue;                   
                    keywordsDivUpdate += "]";                    
                    keywordsDivUpdate += keywordTags[i].getElementsByTagName("accomptitle")[0].childNodes[0].nodeValue;                    
                    keywordsDivUpdate += " - in : "                    
                    keywordsDivUpdate += keywordTags[i].getElementsByTagName("accomptype")[0].childNodes[0].nodeValue.toUpperCase();
                    keywordsDivUpdate += "<br/>";

                    document.getElementById("keywordsList").innerHTML = keywordsDivUpdate;
                    
                }

                var moredetailslink = "<a title=\"Opens in a new window!\" target=\"_blank\" href=\"";
                var urlToEncode = "entityDetails.html?eid=";
                
                urlToEncode += entityTags[j].getElementsByTagName("detailslink")[0].childNodes[0].nodeValue;                
                urlToEncode +="&kwds="+keywordsforlink;
                    
                document.getElementById("moredetailslink").innerHTML = moredetailslink+encodeURI(urlToEncode)+"\">Click for more details</a>";
                
            }

        }
        }
    </script>
    <!-- -->
   
    <!-- Code v2-->
        <script type="text/javascript">
       
        var WeightedVisLayout,draw_options;
        window.onload = function () {
            //try {
            //call text highlight code for entityDetails page only
            var entityDetailsKeywords = '${keywordsForEntityDetailsPage}';
            highlightSearchTerms(entityDetailsKeywords,false,false,"","");
            // network data could alternatively be grabbed via ajax
            //the input GraphML as XML string
            xml_raw = ${visualDataSource};
            <c:if test="${!visualDataSource}">
            
            </c:if>

            //Added to resolve IE \n issue. replace \\\n with \n if FF. Leave \\\n for IE8. remove \\\n if IE7- or Chrome
            if (/MSIE (\d+\.\d+);/.test(navigator.userAgent)){ //test for MSIE x.x;
                //this assumes that the xml alredy has '\\\n'
                var ieversion=new Number(RegExp.$1) // capture x.x portion and store as a number
                if (ieversion>=8) {
                    var xml_raw_clean = xml_raw;
                    //var xml_raw_clean = xml_raw.replace(/\\\n/gi, "\n"); // not needed as CytoscapeWeb fixed \n issue.
                }
                else if (ieversion>=7) {
                    //var xml_raw_clean = xml_raw.replace(/\\\n/gi, "\n"); // not needed as CytoscapeWeb fixed \n issue.
                    var xml_raw_clean = xml_raw;
                }
                else if (ieversion>=6) {
                    var xml_raw_clean = xml_raw.replace(/\n/gi, ""); // not sure if IE6 supports \n.
                }


             } else if (/Firefox[\/\s](\d+\.\d+)/.test(navigator.userAgent)){ //test for Firefox/x.x or Firefox x.x (ignoring remaining digits);
                //var xml_raw_clean = xml_raw.replace(/\\\n/gi, "\n"); // not needed as CytoscapeWeb fixed \n issue.
                var xml_raw_clean = xml_raw;
             } else if (/Chrome[\/\s](\d+\.\d+)/.test(navigator.userAgent)){ //test for Chrome/x.x or Chrome x.x (ignoring remaining digits);
                //var xml_raw_clean = xml_raw.replace(/\\\n/gi, "\n"); // not needed as CytoscapeWeb fixed \n issue.
                var xml_raw_clean = xml_raw;
             }
             else {
                var xml_raw_clean = xml_raw.replace(/\n/gi, "");
             }

            //Options for the Flash object, path and installation if it cannot be found
            var options = {
                swfPath: "js/CytoscapeWeb",
                flashInstallerPath: "playerProductInstall"
            };

            //visual styles for both nodes and edges.these are applied every time the graph visual change is taking place.
            var visual_style = {
                //nodes
                nodes: {
                    //shape:does not count much here, since we use an image
                    shape: "RECTANGLE",
                    //let the border be 'white' for active entities and red for nonActive
                    borderColor: {
                        defaultValue: "#000000",
                        //a discrete attribute mapper
                        discreteMapper: {
                            attrName: "isActive",
                            entries: [
                                { attrValue: "False", value: "#FF0000" }
                            ]
                        }
                    },
                    //a tooltip where we store the matchContent (keywords or whole text).
                    tooltipText: { passthroughMapper: { attrName: "matchContent" } },
                    //image for entities
                    /*
                    image:{defaultValue:"person.png",
                        //a discrete attribute mapper against the label. The "Search" label must be unique whatever it is
                        discreteMapper:{
                            attrName: "label",
                            entries:[{attrValue:"Search", value:"search.png"}]
                        }
                    },*/
                    //produces the effect for the label to go above the figure
                    labelVerticalAnchor: "bottom",

                    //hovering (mouse) effects
                    hoverBorderColor: "#BEFF28",
                    hoverGlowColor: "#BEFF28",
                    hoverOpacity: 0.5,
                    hoverGlowOpacity: 0.4,
                    hoverGlowStrength: 124
                },
                //edges
                edges: {
                    //color and style with a passthrough (directe attribute values) mapper
                    color: { passthroughMapper: { attrName: "edgeColor" } },
                    style: { passthroughMapper: { attrName: "edgeStyle" } }
                }
            };

            // init and draw the visual graph
            vis = new org.cytoscapeweb.Visualization("cytospaceweb", options);


            //this function is applied just before the draw method is called to add funcinality and interaction.
            vis.ready(function() {

                //add context menu item to add an entity to the Group
                vis.addContextMenuItem("Add to Group", "nodes",
                function (evt) {
                    //get the selected target node
                    var selectedNode = evt.target;

                    //exclude from selection the central "Search" node. The "Search" label must be unique whatever it is.
                    if(selectedNode.data["label"]!="Search"){

                        //variables to store the entity's name and id to appear as DOM elements.
                        var userID;
                        var userName;

                        //iterate through the data and store values repsectively
                        for (var i in selectedNode.data) {
                            var variable_name = i;
                            var variable_value = selectedNode.data[i];

                            if(variable_name =="id"){
                                userID=variable_value;
                            }
                            else if(variable_name =="label"){
                                userName=variable_value;
                            }
                        }

                        //check whether the entity is already grouped by searching for a DIV element with the same ID
                        if(document.getElementById("group"+userID)==null){
                            //create a new DIV element and add it to the Group
                            //Notice the hyperlink that directs to a javascript function call for excluding from the group image button
                            var GroupList = document.getElementById("GroupedNodes");

                            var newGroupedItem = document.createElement("div");
                            newGroupedItem.setAttribute("id", "group"+userID);
                            newGroupedItem.innerHTML = "<a href=\"javascript:RemoveFromGroup(\'"+"group"+userID+"\');\"><img title=\"Remove from MyGroup\" src=\"img/delete.png\" border=\"0\"/></a>"+userName;

                            GroupList.appendChild(newGroupedItem);
                        }

                        else//if already in Group
                            alert("This entity already exists to you Group!");
                    }
                    else{//if it is the central node
                        alert("You cannot add the central search node tou your Group!");
                    }
                });

                //add context menu item to remove entity
                vis.addContextMenuItem("Delete node", "nodes",
                function (evt) {
                    // Get the selected target node
                    var selectedNode = evt.target;
                    //exclude from selection the central "Search" node. The "Search" label must be unique whatever it is.
                    if(selectedNode.data["label"]!="Search"){

                        //clear the details panel
                        clear();

                        //variables to store the entity's name and id to appear as DOM elements.
                        var userID;
                        var userName;

                        //variables to store entity's values
                        var nid,nlabel,nweight,naddress,nfaculty,ndepartment,nemail,ntelephone,nisActive,nmatchContent;
                        //variables to store entity's connecting edge values
                        var eid,esource,etarget,elabel,eweight,edgeColor,edgeStyle,edirected;

                        //iterate through the data and store node values repsectively
                        for (var i in selectedNode.data) {
                            var variable_name = i;
                            var variable_value = selectedNode.data[i];

                            if(variable_name =="id"){
                                userID=variable_value;
                                nid=variable_value;

                                //check if the entity is in the Group: is there any point having someone in the desired group and delete him?
                                if(document.getElementById("group"+userID)!=null){
                                    alert("You have that person to your Group!");
                                    //end the function
                                    return;
                                }

                                //get the connecting edge
                                var myedge = vis.edge(userID);

                                //iterate through edge's data and store edge values respectively
                                for(var j in myedge.data){
                                    if(j=="id"){eid=myedge.data[j];}
                                    else if(j=="source"){esource=myedge.data[j];}
                                    else if(j=="target"){etarget=myedge.data[j];}
                                    else if(j=="label"){elabel=myedge.data[j];}
                                    else if(j=="weight"){eweight=myedge.data[j];}
                                    else if(j=="edgeColor"){edgeColor=myedge.data[j];}
                                    else if(j=="edgeStyle"){edgeStyle=myedge.data[j];}
                                    else if(j=="directed"){edirected=myedge.data[j];}
                                }
                            }
                            else if(variable_name =="label"){
                                userName=variable_value;
                                nlabel=variable_value;
                            }
                            else if(variable_name =="weight"){
                                nweight=variable_value;
                            }
                            else if(variable_name =="address"){
                                naddress=variable_value;
                            }
                            else if(variable_name =="faculty"){
                                nfaculty=variable_value;
                            }
                            else if(variable_name =="department"){
                                ndepartment=variable_value;
                            }
                            else if(variable_name =="email"){
                                nemail=variable_value;
                            }
                            else if(variable_name =="telephone"){
                                ntelephone=variable_value;
                            }
                            else if(variable_name =="isActive"){
                                nisActive=variable_value;
                            }
                            else if(variable_name =="matchContent"){
                                nmatchContent=variable_value;
                            }
                        }

                        //remove selected entity from the graph. The connecting edge is removed automatically
                        vis.removeNode(selectedNode,true);

                        //Construct DOM elements that will store the deleted node and edge values. Care the unique identifiers used.
                        //All these are Hidden input fields

                        //For the entity
                        var hid = document.createElement("input");
                        hid.setAttribute("type", "hidden");
                        hid.setAttribute("name", "hid"+userID);
                        hid.setAttribute("id", "hid"+userID);
                        hid.setAttribute("value", nid);

                        var hlabel = document.createElement("input");
                        hlabel.setAttribute("type", "hidden");
                        hlabel.setAttribute("name", "hlabel"+userID);
                        hlabel.setAttribute("id", "hlabel"+userID);
                        hlabel.setAttribute("value", nlabel);

                        var hweight = document.createElement("input");
                        hweight.setAttribute("type", "hidden");
                        hweight.setAttribute("name", "hweight"+userID);
                        hweight.setAttribute("id", "hweight"+userID);
                        hweight.setAttribute("value", nweight);

                        var haddress = document.createElement("input");
                        haddress.setAttribute("type", "hidden");
                        haddress.setAttribute("name", "haddress"+userID);
                        haddress.setAttribute("id", "haddress"+userID);
                        haddress.setAttribute("value", naddress);

                        var hfaculty = document.createElement("input");
                        hfaculty.setAttribute("type", "hidden");
                        hfaculty.setAttribute("name", "hfaculty"+userID);
                        hfaculty.setAttribute("id", "hfaculty"+userID);
                        hfaculty.setAttribute("value", nfaculty);

                        var hdepartment = document.createElement("input");
                        hdepartment.setAttribute("type", "hidden");
                        hdepartment.setAttribute("name", "hdepartment"+userID);
                        hdepartment.setAttribute("id", "hdepartment"+userID);
                        hdepartment.setAttribute("value", ndepartment);

                        var hemail = document.createElement("input");
                        hemail.setAttribute("type", "hidden");
                        hemail.setAttribute("name", "hemail"+userID);
                        hemail.setAttribute("id", "hemail"+userID);
                        hemail.setAttribute("value", nemail);

                        var htelephone = document.createElement("input");
                        htelephone.setAttribute("type", "hidden");
                        htelephone.setAttribute("name", "htelephone"+userID);
                        htelephone.setAttribute("id", "htelephone"+userID);
                        htelephone.setAttribute("value", ntelephone);

                        var hisActive = document.createElement("input");
                        hisActive.setAttribute("type", "hidden");
                        hisActive.setAttribute("name", "hisActive"+userID);
                        hisActive.setAttribute("id", "hisActive"+userID);
                        hisActive.setAttribute("value", nisActive);

                        var hmatchContent = document.createElement("input");
                        hmatchContent.setAttribute("type", "hidden");
                        hmatchContent.setAttribute("name", "hmatchContent"+userID);
                        hmatchContent.setAttribute("id", "hmatchContent"+userID);
                        hmatchContent.setAttribute("value", nmatchContent);

                        //Store the connecting edge's data attributes
                        var heid = document.createElement("input");
                        heid.setAttribute("type", "hidden");
                        heid.setAttribute("name", "heid"+userID);
                        heid.setAttribute("id", "heid"+userID);
                        heid.setAttribute("value", eid);

                        var hesource = document.createElement("input");
                        hesource.setAttribute("type", "hidden");
                        hesource.setAttribute("name", "hesource"+userID);
                        hesource.setAttribute("id", "hesource"+userID);
                        hesource.setAttribute("value", esource);

                        var hetarget = document.createElement("input");
                        hetarget.setAttribute("type", "hidden");
                        hetarget.setAttribute("name", "hetarget"+userID);
                        hetarget.setAttribute("id", "hetarget"+userID);
                        hetarget.setAttribute("value", etarget);

                        var helabel = document.createElement("input");
                        helabel.setAttribute("type", "hidden");
                        helabel.setAttribute("name", "helabel"+userID);
                        helabel.setAttribute("id", "helabel"+userID);
                        helabel.setAttribute("value", elabel);

                        var heweight = document.createElement("input");
                        heweight.setAttribute("type", "hidden");
                        heweight.setAttribute("name", "heweight"+userID);
                        heweight.setAttribute("id", "heweight"+userID);
                        heweight.setAttribute("value", eweight);

                        var hedgeColor = document.createElement("input");
                        hedgeColor.setAttribute("type", "hidden");
                        hedgeColor.setAttribute("name", "hedgeColor"+userID);
                        hedgeColor.setAttribute("id", "hedgeColor"+userID);
                        hedgeColor.setAttribute("value", edgeColor);

                        var hedgeStyle = document.createElement("input");
                        hedgeStyle.setAttribute("type", "hidden");
                        hedgeStyle.setAttribute("name", "hedgeStyle"+userID);
                        hedgeStyle.setAttribute("id", "hedgeStyle"+userID);
                        hedgeStyle.setAttribute("value", edgeStyle);

                        var hedirected = document.createElement("input");
                        hedirected.setAttribute("type", "hidden");
                        hedirected.setAttribute("name", "hedirected"+userID);
                        hedirected.setAttribute("id", "hedirected"+userID);
                        hedirected.setAttribute("value", edirected);

                        //Construct a new DIV element and add the hidden fields as child nodes in the DOM.
                        //Notice the hyperlink that directs to a javascript function call for the restore image button
                        var newRemovedItem = document.createElement("div");
                        newRemovedItem.setAttribute("id", userID);
                        newRemovedItem.innerHTML = "<a href=\"javascript:RestoreNode(\'"+userID+"\');\"><img title=\"Restore node to graph!\" src=\"img/delete.png\" border=\"0\"/></a>"+userName;

                        //the node's hidden fields
                        newRemovedItem.appendChild(hid);
                        newRemovedItem.appendChild(hlabel);
                        newRemovedItem.appendChild(hweight);
                        newRemovedItem.appendChild(haddress);
                        newRemovedItem.appendChild(hfaculty);
                        newRemovedItem.appendChild(hdepartment);
                        newRemovedItem.appendChild(hemail);
                        newRemovedItem.appendChild(htelephone);
                        newRemovedItem.appendChild(hisActive);
                        newRemovedItem.appendChild(hmatchContent);

                        //and the edge's hidden fields
                        newRemovedItem.appendChild(heid);
                        newRemovedItem.appendChild(hesource);
                        newRemovedItem.appendChild(hetarget);
                        newRemovedItem.appendChild(helabel);
                        newRemovedItem.appendChild(heweight);
                        newRemovedItem.appendChild(hedgeColor);
                        newRemovedItem.appendChild(hedgeStyle);
                        newRemovedItem.appendChild(hedirected);

                        //get the DIV for the removed nodes and add a new DIV elemnt to represent the deleted entity
                        var RemovedList = document.getElementById("RemovedNodes");
                        RemovedList.appendChild(newRemovedItem);
                    }
                    else{//if it is the central "Search" node.
                        alert("You cannot delete the central search node!");
                    }
                }
            );
                // add a listener for when nodes are clicked
                // add a listener for when NO nodes are clicked
                vis.addListener("click", "nodes", function(event) { handle_click(event); })
                .addListener("click", "none", function(event) { handle_click(event);});


                function handle_click(event) {
                    var target = event.target;
                    //when an empty space is clicked
                    if(target == null)
                        clear();
                    else{//when a node is clicked
                        //iterate through entity's data and update the details panel
                        for (var i in target.data) {
                            var variable_name = i;
                            var variable_value = target.data[i];

                            if(variable_name =="id"){
                                document.getElementById("id").innerHTML = variable_value;
                                getExtraEntityData(variable_value);
                            }
                            else if(variable_name =="label") {
                                //var tmpNameVar1 = variable_value.replace("\n", ",", "gi");;
                                //document.getElementById("name").innerHTML = tmpNameVar1;
                            }
                            else if(variable_name =="address")
                                document.getElementById("address").innerHTML = variable_value;
                            else if  (variable_name =="faculty")
                                document.getElementById("faculty").innerHTML = variable_value;
                            else if  (variable_name =="department")
                                document.getElementById("department").innerHTML = variable_value;
                            else if  (variable_name =="email")
                                document.getElementById("email").innerHTML = variable_value;
                            else if  (variable_name =="telephone")
                                document.getElementById("telephone").innerHTML = variable_value;
                            else if  (variable_name =="isActive") {
                                document.getElementById("isActive").innerHTML = variable_value;
                            }
                            /*
                            else if  (variable_name =="matchContent") {
                                document.getElementById("matchContent").innerHTML = variable_value;
                            }
                            else if  (variable_name =="keywordsList") {
                                //var moreDetailsLink = "<a href=\"entityDetails.html?eid=150&kwds=" + variable_value + "\">More Info</a>"
                                //document.getElementById("keywordsList").innerHTML = moreDetailsLink;

                            }
                            */
                        }
                    }
                }


            });

            //out ForceDirected - edge weighted layout to advance the length of edges
            WeightedVisLayout = {name:"ForceDirected",options:{
                    weightAttr: "weight",
                    minWeight: 0.0,
                    maxWeight: ${highestWeightValue}
                }}

            //draw options(input, style, tooltip for edges, labeling and layout
            draw_options = {
                network: xml_raw_clean,
                visualStyle: visual_style,
                nodeTooltipsEnabled: true,
                //by default the edge's label takes the label attribute, which in our case contains the same value as the weight.
                edgeLabelsVisible: true,
                panZoomControlPosition: "topRight",
                layout: WeightedVisLayout
            };

            //draw the graph
            vis.draw(draw_options);
            hideSearchInfoBox();
           // } catch (err) {
//alert(err.description );
  //          }
        };

        //restore a deleted entity
        function RestoreNode(userID){
            //get the DOM elemnt contaiining the deleted entities as a repository
            var RemovedList = document.getElementById("RemovedNodes");
            //get the one we want to restore
            var toRestore = document.getElementById(userID);

            //Get hidden field's node values
            var vid = document.getElementById("hid"+userID).value;
            var vlabel = document.getElementById("hlabel"+userID).value;
            var vweight = document.getElementById("hweight"+userID).value;
            var vaddress = document.getElementById("haddress"+userID).value;
            var vfaculty = document.getElementById("hfaculty"+userID).value;
            var vdepartment = document.getElementById("hdepartment"+userID).value;
            var vemail = document.getElementById("hemail"+userID).value;
            var vtelephone = document.getElementById("htelephone"+userID).value;
            var visActive = document.getElementById("hisActive"+userID).value;
            var vmatchContent = document.getElementById("hmatchContent"+userID).value;

            //and edge's
            var veid = document.getElementById("heid"+userID).value;
            var vesource = document.getElementById("hesource"+userID).value;
            var vetarget = document.getElementById("hetarget"+userID).value;
            var velabel = document.getElementById("helabel"+userID).value;
            var veweight = document.getElementById("heweight"+userID).value;
            var vedgeColor = document.getElementById("hedgeColor"+userID).value;
            var vedgeStyle = document.getElementById("hedgeStyle"+userID).value;
            var vedirected = document.getElementById("hedirected"+userID).value;

            //construct node's data
            var ndata = {
                id: vid,
                label: vlabel,
                weight: vweight,
                address: vaddress,
                faculty: vfaculty,
                department: vdepartment,
                email: vemail,
                telephone: vtelephone,
                isActive: visActive,
                matchContent: vmatchContent
            };

            //add node (restore). Coordination here are useless, because a layout will be applied again
            vis.addNode(240,360,ndata,true);

            //construct connecting edge's data
            var edata = {
                id: veid,
                source: vesource,
                target: vetarget,
                label: velabel,
                weight: veweight,
                edgeColor: vedgeColor,
                edgeStyle: vedgeStyle,
                directed: vedirected
            };

            //add connecting edge (restore)
            vis.addEdge(edata,true);

            //re-layout the graph
            vis.layout(WeightedVisLayout);

            //remove all the hidden fields first from DOM
            while (toRestore.hasChildNodes()) {
                toRestore.removeChild(toRestore.lastChild);
            }
            //remove the DIV entry for the entity
            RemovedList.removeChild(toRestore);
        }

        //remove an entity from the Group
        function RemoveFromGroup(userID){
            //get the DOM elemnt contaiining the grouped entities as a repository
            var GroupedList = document.getElementById("GroupedNodes");
            //get the one we want to remove from the Group
            var toRemove = document.getElementById(userID);
            //remove from DOM
            GroupedList.removeChild(toRemove);
        }
        //clears the details panel fields
        function clear() {
            document.getElementById("id").innerHTML = "";
            document.getElementById("name").innerHTML = "";
            document.getElementById("address").innerHTML = "";
            document.getElementById("faculty").innerHTML = "";
            document.getElementById("department").innerHTML = "";
            document.getElementById("email").innerHTML = "";
            document.getElementById("telephone").innerHTML = "";
            document.getElementById("isActive").innerHTML = "";
        }

        //re-Layout the graph (tool)
        function ReLayout(){
            vis.layout(WeightedVisLayout);
        }
        //re-draw the whole raph (tool)
        function ReDrawAll(){
            //clear the details panel fields
            clear();
            //clear the deleted entities bin
            var RemovedList = document.getElementById("RemovedNodes");
            while (RemovedList.hasChildNodes()) {
                while(RemovedList.lastChild.hasChildNodes()){
                    RemovedList.lastChild.removeChild(RemovedList.lastChild.lastChild);
                }
                RemovedList.removeChild(RemovedList.lastChild);
            }

            //redraw the graph
            vis.draw(draw_options);
        }
    </script>
                <!-- End code v2 -->
